<!--<template>-->
<!--  <div-->
<!--    class="draggable"-->
<!--    ref="draggable"-->
<!--    :style="{ left: `${x}px`, top: `${y}px` }"-->
<!--    @mousedown="startDrag"-->
<!--  >-->
<!--    {{ message }}-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { ref, onMounted } from 'vue';-->

<!--export default {-->
<!--  props: {-->
<!--    message: {-->
<!--      type: String,-->
<!--      default: '',-->
<!--    },-->
<!--    parentWidth: {-->
<!--      type: Number,-->
<!--      default: 0,-->
<!--    },-->
<!--    parentHeight: {-->
<!--      type: Number,-->
<!--      default: 0,-->
<!--    },-->
<!--  },-->

<!--  setup(props) {-->
<!--    const x = ref(0);-->
<!--    const y = ref(0);-->
<!--    const el = ref(null);-->
<!--    let isDragging = false;-->

<!--    const startDrag = (e) => {-->
<!--      e.preventDefault();-->
<!--      // 获取子组件的根元素-->
<!--      el.value = e.target;-->

<!--      // 获取父组件的位置信息-->
<!--      const parentRect = el.value.parentNode.getBoundingClientRect();-->
<!--      const parentLeft = parentRect.left;-->
<!--      const parentTop = parentRect.top;-->

<!--      // 获取子组件的位置信息-->
<!--      const shiftX = e.clientX - el.value.getBoundingClientRect().left;-->
<!--      const shiftY = e.clientY - el.value.getBoundingClientRect().top;-->

<!--      const moveAt = (e) => {-->
<!--        // 计算子组件的新位置-->
<!--        let newX = e.pageX - shiftX - parentLeft;-->
<!--        let newY = e.pageY - shiftY - parentTop;-->

<!--        // 将子组件的位置限制在父组件内-->
<!--        newX = Math.max(0, newX);-->
<!--        newX = Math.min(props.parentWidth - el.value.offsetWidth, newX);-->
<!--        newY = Math.max(0, newY);-->
<!--        newY = Math.min(props.parentHeight - el.value.offsetHeight, newY);-->

<!--        // 更新子组件的位置-->
<!--        el.value.style.left = `${newX}px`;-->
<!--        el.value.style.top = `${newY}px`;-->

<!--        // 更新响应式变量的值-->
<!--        x.value = newX;-->
<!--        y.value = newY;-->
<!--      };-->

<!--      const stopDrag = () => {-->
<!--        document.removeEventListener('mousemove', moveAt);-->
<!--        document.removeEventListener('mouseup', stopDrag);-->
<!--        isDragging = false;-->
<!--      };-->

<!--      document.addEventListener('mousemove', moveAt);-->
<!--      document.addEventListener('mouseup', stopDrag);-->
<!--      isDragging = true;-->
<!--    };-->

<!--    const cancelDrag = () => {-->
<!--      if (isDragging) {-->
<!--        document.removeEventListener('mousemove', startDrag);-->
<!--        document.removeEventListener('mouseup', cancelDrag);-->
<!--        isDragging = false;-->
<!--      }-->
<!--    };-->

<!--    onMounted(() => {-->
<!--      // 获取子组件的根元素-->
<!--      el.value = document.querySelector('.draggable');-->

<!--      // 监听文档对象的mouseup事件，当鼠标在子组件上按下时，可以自动取消拖动-->
<!--      document.addEventListener('mouseup', cancelDrag);-->
<!--    });-->

<!--    return { x, y, startDrag };-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style>-->
<!--.draggable {-->
<!--  width: 200px; height: 200px;-->
<!--  background-color: #3a86ff;-->
<!--  position: absolute;-->
<!--  user-select: none;-->
<!--  cursor: move;-->
<!--}-->
<!--</style>-->



<template>
  <div
    class="draggable"
    ref="draggable"
    :style="{ left: `${x}px`, top: `${y}px` }"
    @mousedown="startDrag"
  >
    {{ message }}
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  props: {
    message: {
      type: String,
      default: '',
    },
    parentWidth: {
      type: Number,
      default: 0,
    },
    parentHeight: {
      type: Number,
      default: 0,
    },
  },

  setup(props) {
    const x = ref(300);
    const y = ref(0);

    const el = ref(null);
    let isDragging = false;

    const startDrag = (e) => {
      e.preventDefault();
      // 获取子组件的根元素
      el.value = e.target;

      // 获取父组件的位置信息
      const parentRect = el.value.parentNode.getBoundingClientRect();
      const parentLeft = parentRect.left;
      const parentTop = parentRect.top;

      // 获取子组件的位置信息
      const shiftX = e.clientX - el.value.getBoundingClientRect().left;
      const shiftY = e.clientY - el.value.getBoundingClientRect().top;

      const moveAt = (e) => {
        // 计算子组件的新位置
        let newX = e.pageX - shiftX - parentLeft;
        let newY = e.pageY - shiftY - parentTop;

        // 将子组件的位置限制在父组件内
        newX = Math.max(0, newX);
        newX = Math.min(props.parentWidth - el.value.offsetWidth, newX);
        newY = Math.max(0, newY);
        newY = Math.min(props.parentHeight - el.value.offsetHeight, newY);

        // 更新子组件的位置
        el.value.style.left = `${newX}px`;
        el.value.style.top = `${newY}px`;

        // 更新响应式变量的值
        x.value = newX;
        y.value = newY;
      };

      const stopDrag = () => {
        document.removeEventListener('mousemove', moveAt);
        document.removeEventListener('mouseup', stopDrag);
        isDragging = false;
      };

      document.addEventListener('mousemove', moveAt);
      document.addEventListener('mouseup', stopDrag);
      isDragging = true;
    };

    const cancelDrag = () => {
      if (isDragging) {
        document.removeEventListener('mousemove', startDrag);
        document.removeEventListener('mouseup', cancelDrag);
        isDragging = false;
      }
    };

    onMounted(() => {
      // 获取子组件的根元素
      el.value = document.querySelector('.draggable');

      // 监听文档对象的mouseup事件，当鼠标在子组件上按下时，可以自动取消拖动
      document.addEventListener('mouseup', cancelDrag);
    });


    return { x, y, startDrag };
  },
};

</script>

<style>
.draggable {
  width: 200px;
  height: 200px;
  background-color: #3a86ff;
  position: absolute;
  user-select: none;
  cursor: move;
}

</style>